// 页面元素获取
//登入页面的移动效果添加属性的元素
const totalBox = document.querySelector('.totalBox');
const goLogin = document.querySelector('.goLogin');
const goEnroll = document.querySelector('.goEnroll');
// 注册元素获取
const userName = document.querySelector('.enroll-totalBox .userName')
const email = document.querySelector('.enroll-totalBox .email')
const password = document.querySelector('.enroll-totalBox .password')
const password1 = document.querySelector('.enroll-totalBox .password1')
const formEnroll = document.querySelector('.form-enroll')
// 发送验证码元素获取
const capBtn = document.querySelector('.goCaptcha')
// 验证码判断元素获取
const cap = document.querySelector('.captcha')
// 登入页面获取元素
const inputUser = document.querySelector('.login-totalBox .userName1')
const inputPassword = document.querySelector('.login-totalBox .password')


// 定义正则表达式
// 用户名
const reg1 = /[A-Za-z]{4}/
// 邮箱
const reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
// 密码
const reg2 = /^(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}$/

// 关键点
let userK = 0
let emailK = 0
let passwordK = 0
let password1K = 0
let captchaK = 0
let message = 0
//声明数组，如果本地存储有数据就位本地存储数据，如果没有数据就是一个空数组
let arr = JSON.parse(localStorage.getItem('arr')) || []


// 函数
// 验证登录表单函数
function verify() {
  const userValue = inputUser.value.trim()
  const passwordValue = inputPassword.value.trim()
  //用户名判断
  if (userValue === '') {
    cueError(inputUser, '请输入用户名')
  } else if (!userpd(userValue)) {
    cueError(inputUser, '请输入正确的邮箱格式')
  } else if (emailpd(userValue)) {
    removeError(inputUser)
  }
  //密码判断
  if (passwordValue === '') {
    cueError(inputPassword, '请输入密码')
  }
  else {
    removeError(inputPassword)
  }
}
// 验证注册表单函数
function verify1() {
  const emailValue = email.value.trim()
  const userNameValue = userName.value.trim()
  const passwordValue = password.value.trim()
  const password1Value = password1.value.trim()

  // 注册页面验证用户名
  if (userNameValue === '') {
    cueError(userName, '请输入用户名')
  } else {
    removeError(userName)
    console.log(2)
  }
  // 注册页面验证邮箱
  if (emailValue === '') {
    cueError(email, '请输入邮箱')
  } else {
    removeError(email)
  }
  // 注册页面验证密码
  if (passwordValue === '') {
    cueError(password, '请输入密码')
  }
  else {
    removeError(password)
  }
  // 注册页面验证确认密码
  if (password1Value === '') {
    cueError(password1, '请输入密码')
  } else if (password1Value !== passwordValue) {
    cueError(password1, '请输入密码两次正确的密码')
  }
  else {
    removeError(password1)
  }
}
// 提示错误函数
function cueError(inp, cue) {
  // 获取形参的下一个元素
  const i = inp.nextElementSibling
  // 给下一个元素添加内容
  i.textContent = cue
  i.classList.add('e')
}
// 移除属性函数
function removeError(inp) {
  // 获取形参的下一个元素
  const i = inp.nextElementSibling
  //给i元素去除e属性
  i.classList.remove('e')
  // 清空形参下一个i标签里的内容
  i.innerHTML = ''
}
//正则判断函数
function emailpd(email) {
  return reg.test(email)
}
function userpd(user) {
  return reg1.test(user)
}
function mmpd(mm) {
  return reg2.test(mm)
}

// 注册函数
function enrollUser(username, email, password) {
  // 声明两个变量分别代表数据是否存在
  let usernameExists = false
  let emailExists = false
  // 遍历arr数组
  for (let userMessgae of arr) {
    // 如果用户名存在就将它的值变为true
    if (userMessgae.username === username) {
      usernameExists = true
      break
    }
    // 如果邮箱存在就将它的值变为true
    if (userMessgae.email === email) {
      emailExists = true
      break
    }
  }
  // 如果数据存在就执行下面的代码
  if (emailExists) {
    message = 0
    alert('注册的邮箱已存在')
  } else if (usernameExists) {
    message = 0
    alert('注册的用户名已存在')
  } else {
    // 如果不存在就作为新值条件到数组
    let obj = {
      username: username,
      email: email,
      password: password
    }
    arr.push(obj)
    localStorage.setItem('arr', JSON.stringify(arr))
    // 注册成功改变message的值
    message = 1
    alert('注册成功')
  }
}


//登录函数
function login(username, password) {
  let userError = false
  let loginSuccess = false
  console.log(username, password)
  for (let userMessage of arr) {
    console.log('检擦')
    if (userMessage.username == username && userMessage.password == password) {
      console.log('正确')
      loginSuccess = true
      userError = false
      break
    }
    else if (userMessage.username === username) {
      userError = false
      break
    }
    else if (userMessage.username !== username) {
      userError = true
      break
    }
  }
  if (loginSuccess) {
    alert('登录成功')
  } else if (userError) {
    alert('用户未注册')
  } else {
    alert('密码错误')
  }
}



// 事件
// 给按钮添加点击事件，在点击事件中给他们添加shiftRight属性
goEnroll.addEventListener('click', () => totalBox.classList.add('shiftRight'))
goLogin.addEventListener('click', () => totalBox.classList.remove('shiftRight'))

// 登录
// 用户登录按钮点击事件
document.querySelector('.form-login').addEventListener('click', e => {
  // 阻止表单默认提交
  e.preventDefault()
  // 验证登录表单函数
  verify()
  // 用户登录
  login(inputUser.value, inputPassword.value)

})
// 登录用户名验证-失去焦点事件
inputUser.addEventListener('blur', function () {
  if (!userpd(this.value)) {
    // 提示错误函数
    cueError(this, '请输入正确的用户名')
  } else if (userpd(this.value)) {
    // 移除属性函数
    removeError(this)
  }
})
//登录用户名验证-输入事件
inputUser.addEventListener('input', function () {
  if (!userpd(this.value)) {
    // 提示错误函数
    cueError(this, '请输入正确的用户名')
  } else if (userpd(this.value)) {
    // 移除属性函数
    removeError(this)
  }
})
//登录密码验证-失去焦点事件
inputPassword.addEventListener('blur', function () {
  if (!mmpd(this.value)) {
    // 提示错误函数
    cueError(this, '请输入正确的密码格式')
  } else if (mmpd(this.value)) {
    // 移除属性函数
    removeError(this)
  }
})

// 注册
// 用户注册按钮点击事件
formEnroll.addEventListener('click', e => {
  // 阻止表单默认提交
  e.preventDefault()
  // 验证注册表单函数
  verify1()
  if (userK == 1 && emailK == 1 && passwordK == 1 && password1K == 1 && captchaK == 1) {
    // 注册函数
    enrollUser(userName.value, email.value, password.value)
    userName.value = ''
    email.value = ''
    password.value = ''
    password1.value = ''
    password1.value = ''
    document.querySelector('.captcha').value = ''
    capBtn.innerHTML = '发送验证码'
    // 当注册成功时message才等于1，才能跳转到登录界面
    if (message == 1) {
      goLogin.click()

    }
  }
})
//注册页面用户名-失去焦点事件
userName.addEventListener('blur', function () {
  if (!userpd(this.value)) {
    cueError(userName, '请输入正确的用户名')
    userK = 0
  } else if (userpd(this.value)) {
    removeError(userName)
    userK = 1
  }
})
//注册页面用户名-输入事件
userName.addEventListener('input', function () {
  if (!userpd(this.value)) {
    cueError(userName, '请输入正确的用户名')
  } else if (userpd(this.value)) {
    removeError(userName)
  }
})
//注册页面邮箱判断-失去焦点事件
email.addEventListener('blur', function () {
  if (!emailpd(this.value)) {
    cueError(this, '请输入正确的邮箱格式')
    emailK = 0
  } else if (emailpd(this.value)) {
    removeError(userName)
    emailK = 1
  }
})
//注册页面邮箱判断-输入事件
email.addEventListener('input', function () {
  if (!emailpd(this.value)) {
    cueError(this, '请输入正确的邮箱格式')
  } else if (emailpd(this.value)) {
    removeError(this)
  }
})
//注册页面密码判断-失去焦点事件
password.addEventListener('blur', function () {
  if (!mmpd(this.value)) {
    cueError(this, '请输入正确的密码')
    passwordK = 0
  } else if (mmpd(this.value)) {
    removeError(this)
    passwordK = 1
  }
})
//注册页面确认密码判断-失去焦点事件
password1.addEventListener('blur', function () {
  const passwordValue = password.value.trim()
  const password1Value = password1.value.trim()
  if (password1Value === '') {
    cueError(password1, '请输入密码')
    password1K = 0
  } else if (password1Value !== passwordValue) {
    cueError(password1, '请输入密码两次正确的密码')
    password1K = 0
  }
  else {
    removeError(password1)
    password1K = 1
  }
})

// 侧边栏
// 侧边栏注册页面
goEnroll.addEventListener('click', function () {
  if (password.value == '') {
    passwordK = 0
  }
})

// 产生随机数函数以及验证码发送点击事件
capBtn.addEventListener('click', function (e) {
  e.preventDefault()
  if (userK == 1 && emailK == 1 && passwordK == 1 && password1K == 1) {
    //生成随机验证码(包含英文字母和数字）
    //创建数组
    let captcha = []
    let num = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    // //提取随机数对应的字符
    for (let i = 0; i < 5; i++) {
      //   //产生一个随机数
      let random = Math.floor(Math.random() * 37)//提取数组中的元素
      let random1 = Math.random()//定义另一个随机数来转换字母大写
      //判断元素是不是字母且随机数是不是大于0.5，是就大写否就小写
      let char = (random < 26 && random1 > 0.5) ? num[random].toUpperCase() : num[random]
      captcha.push(char)
    }
    this.innerHTML = captcha.join('')
    // 验证码标签-失去焦点事件
    cap.addEventListener('blur', function () {
      if (capBtn.innerHTML !== this.value) {
        cueError(this, '验证码不符')
        captchaK = 0
      } else {
        removeError(this)
        captchaK = 1
      }
    })
  } else {
    alert('请填好上面的信息')
  }
})




